<template>
  <div>
    <el-container>
      <el-header style="background-color: #6f50b3; height: 105px;">
        <div style="float: left; position: relative; top: 9px">
          <img src="@/assets/logo1.png" alt="软约评分系统" style="width: 55px; position: relative; top: 16px; left: 3px">
          <span
            style="font-size: 20px; margin-left: 15px; color: white; position: relative; bottom: 6px; font-weight: bold">软约评分系统</span>
        </div>
        <div style="float: right; position: relative; top: 15px; right: 350px">
          <el-menu :default-active="$route.path" router class="el-menu-demo" mode="horizontal" text-color="#fff"
            @select="handleSelect" background-color="#6f50b3" active-text-color="#ffd04b">
            <el-menu-item index="/show">
              <span style="margin-right: 100px">首页</span>
            </el-menu-item>
            <el-menu-item index="2">
              <span style="margin-right: 100px">产品</span>
            </el-menu-item>
            <el-menu-item index="3">
              <span style="margin-right: 100px">服务</span>
            </el-menu-item>
            <el-menu-item index="/DaoJiShi">
              <span style="margin-right: 100px">倒计时</span>
            </el-menu-item>
            <el-menu-item index="/layout">
              <span style="">关于我们</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-header>
    </el-container>

    <el-container style="background-color: #9879df ;width: 100%;height: 1000px">
      <div style="height: 500px;width: 1300px;position: relative;left: 510px;top: 40px">
        <!--el-col将一行分为24份-->
        <el-row>
          <el-col :span="16">
            <div style="width: 95%">
              <el-carousel style="height: 350px;" :interval="3000" class="swiper">
                <el-carousel-item v-for="item in 1" :key="1">
                  <a href="##">
                    <img style="width: 100vh;height: 500px;border-radius: 20px" src="@/assets/P1.png">
                  </a>
                </el-carousel-item>
                <el-carousel-item v-for="item in 1" :key="2">
                  <a href="###">
                    <img style="width: 100%;height: 100%;border-radius: 20px" src="@/assets/p2.png">
                  </a>
                </el-carousel-item>
                <el-carousel-item v-for="item in 1" :key="3">
                  <a href="###">
                    <img style="width: 100%;height: 100%;border-radius: 20px" src="@/assets/p3.png">
                  </a>
                </el-carousel-item>
                <el-carousel-item v-for="item in 1" :key="4">
                  <a href="###">
                    <img style="width: 100%;height: 100%;border-radius: 20px" src="@/assets/p5.png">
                  </a>
                </el-carousel-item>
                <el-carousel-item v-for="item in 1" :key="5">
                  <a href="###">
                    <img style="width: 100%;height: 100%;border-radius: 20px" src="@/assets/p6.png">
                  </a>
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-col>
        </el-row>
        <!--Row 组件 提供 tutter 属性来指定每一栏之间的间隔，默认间隔未 0-->
        <el-row :gutter="10" style="position: relative;right: 240px">
          <el-divider>在线选手打分系统</el-divider>
          <el-col :span="25">
            <div style="width: 100%;height: 100%;position:relative;top: 20px;left: 10px;">
              <el-card :body-style="{ padding: '0px' }"
                style="width: 180px;height: 200px;float: left; margin-right: 20px; margin-bottom: 20px;">
                <img src="@/assets/p9.png" style="width: 100%;display: block">
                <div style="padding: 20px;display: block;">
                  <span style="color: black;">选手一</span>
                  <div style="text-align: center;">
                    <el-button type="primary">打分</el-button>
                  </div>
                </div>
              </el-card>
              <el-card :body-style="{ padding: '0px' }"
                style="width: 180px;height: 200px;float: left; margin-right: 20px; margin-bottom: 20px;">
                <img src="@/assets/p9.png" style="width: 100%;display: block">
                <div style="padding: 20px;display: block;">
                  <span style="color: black;">选手二</span>
                  <div style="text-align: center;">
                    <el-button type="primary">打分</el-button>
                  </div>
                </div>
              </el-card>
              <el-card :body-style="{ padding: '0px' }"
                style="width: 180px;height: 200px;float: left; margin-right: 20px; margin-bottom: 20px;">
                <img src="@/assets/p9.png" style="width: 100%;display: block">
                <div style="padding: 20px;display: block;">
                  <span style="color: black;">选手三</span>
                  <div style="text-align: center;">
                    <el-button type="primary">打分</el-button>
                  </div>
                </div>
              </el-card>
              <el-card :body-style="{ padding: '0px' }"
                style="width: 180px;height: 200px;float: left; margin-right: 20px; margin-bottom: 20px;">
                <img src="@/assets/p9.png" style="width: 100%;display: block">
                <div style="padding: 20px;display: block;">
                  <span style="color: black;">选手四</span>
                  <div style="text-align: center;">
                    <el-button type="primary">打分</el-button>
                  </div>
                </div>
              </el-card>
              <el-card :body-style="{ padding: '0px' }"
                style="width: 180px;height: 200px;float: left; margin-right: 20px; margin-bottom: 20px;">
                <img src="@/assets/p9.png" style="width: 100%;display: block">
                <div style="padding: 20px;display: block;">
                  <span style="color: black;">选手五</span>
                  <div style="text-align: center;">
                    <el-button type="primary">打分</el-button>
                  </div>
                </div>
              </el-card>
              <el-card :body-style="{ padding: '0px' }"
                style="width: 180px;height: 200px;float: left; margin-right: 20px; margin-bottom: 20px;">
                <img src="@/assets/p9.png" style="width: 100%;display: block">
                <div style="padding: 20px;display: block;">
                  <span style="color: black;">选手六</span>
                  <div style="text-align: center;">
                    <el-button type="primary">打分</el-button>
                  </div>
                </div>
              </el-card>
            </div>
          </el-col>
          <el-col :span="5">
          </el-col>
        </el-row>
      </div>
    </el-container>
    <el-main>
      <router-view />
    </el-main>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: "Show",
  setup() {
    const activeIndex = ref('1');

    const handleSelect = (key) => {
      console.log(`选中了索引为${key}的菜单项`);
      // 这里可以根据选中的索引进行更多业务逻辑处理，比如路由跳转等
      activeIndex.value = key;
    };

    return {
      activeIndex,
      handleSelect
    };
  }
}
</script>

<style scoped>
.el-menu-demo {
  height: 60px;
  line-height: 60px;
  margin-right: 50px;

}

.el-menu-item {
  margin: 0 20px;

}

span {
  color: white;
  font-size: 25px;
  font-weight: bold;
  text-decoration: none;
}
</style>